<template>
  <div class="root-container">
<div class="sub-header">
  <a class="header-left" href="">
    <img class="roll-pic" src="../assets/addpic.svg" alt="">
创建问卷
  </a>
  <div class="header-right">
  <a class="header-btn" href="">
  </a>
  <a class="header-trash" href="">
  </a>
  <a class="list-pic" href=""></a>
  </div>
</div>
<div class="layout-right"></div>
<div class="layout-main">
  <div class="layout-container">
    <img src="" alt="">
    <p></p>
      <div>
        <a href="">
          svg
          现在就去创建
        </a>
      </div>
  </div>
</div>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="scss" scoped>
.root-container wrapper{
  min-width: 980px;
  height: 100%;
  margin: 0;
  padding: 0;
}
.sub-header{
  width: 1280px;
  height: 60px;
  box-sizing: border-box;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: aqua;
  margin-top: 60px ;
}

.header-left{
  // margin-top: 160px;
  width: 73px;
  height: 14px;
  background-color: #008fff;
  border: 1px solid #008fff;
  color:#fff;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin-left: 20px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
}
.roll-pic{
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border-color: #008fff;
  color: #fff;
  margin-right: 4px;
}
.header-right{
  width: 183px;
  height: 60px;
  background-color: burlywood;
  display: flex;
  align-items:center ;
  justify-content: space-between;
  overflow: hidden
}
.header-btn{
  width: 21px;
  height: 20px;
  background-image: url("../assets/que-file.svg");
}
.header-btn:hover{
  width: 21px;
  height: 20px;
  background-image: url("../assets/que-file-blue.svg") ;
}
// .trash-btn{
//   width: 21px;
//   height: 16px;
// }
.header-trash{
  background-image: url("../assets/trashgrey.png");
  width: 21px;
  height: 21px;
  background-repeat: no-repeat;
  background-size: 100%;
  // display: flex;
  // align-items: center;
  // position: relative;
}
.header-trash:hover{
  background-image: url("../assets/trashblue.png");
  width: 21px;
  height: 21px;
  background-repeat: no-repeat;;
  background-size: 100%;
  // background-position: 1px 21px;
  // z-index: 999x;
  // img(display: none);
}
.list-pic{
  background-image: url("../assets/list-pic.svg");
  width: 21px;
  height: 21px;
}
.list-pic:hover{
background-image: url("../assets/list-pic-blue.svg");
width: 21px;
height: 21px;
}
</style>
